@import "variables";
@import "page";

html{
	font-size: 16px;
}

body { 
	font-family: "微软雅黑","Hiragino Sans GB","Microsoft YaHei","宋体",Arial,Verdana,sans-serif;
	font-size: 1rem;
	font-color: @black;
}

body,.app-body{
	background-color: @light-gray !important;
}

input[type=checkbox],
input[type=radio   ]{
  width     : 2em;
  margin    : 0;
  padding   : 0;
  font-size : 1em;
  opacity   : 0;
  display: none;
}

input[type=checkbox] + label,
input[type=radio   ] + label{
  display      : inline-block;
  margin-left  : 0px;
  line-height  : 1em;
}

input[type=checkbox]:not(old) + label > span,
input[type=radio   ]:not(old) + label > span{
  display          : inline-block;
  width            : 2em;
  height           : 2em;
  margin           : 0.25em 0.5em 0.25em 0.25em;
  //border           : 0.0625em solid rgb(192,192,192);
  border-radius    : 1em;
  background       : rgb(224,224,224);
  background-image :    -moz-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :     -ms-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :      -o-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image : -webkit-linear-gradient(rgb(240,240,240),rgb(224,224,224));
  background-image :         linear-gradient(rgb(240,240,240),rgb(224,224,224));
  vertical-align   : bottom;
}

input[type=checkbox]:checked + label > span,
input[type=radio   ]:checked + label > span{
  background-image :    -moz-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :     -ms-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :      -o-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image : -webkit-linear-gradient(rgb(224,224,224),rgb(240,240,240));
  background-image :         linear-gradient(rgb(224,224,224),rgb(240,240,240));
}


input[type=radio].mark-radio:checked + label > span:before{
  content     : '✓';
  display     : block;
  width       : 1em;
  color       : @white;
  font-size   : 0.875em;
  line-height : 1em;
  text-align  : center;
  text-shadow : 0 0 0.0714em rgb(115,153,77);
  font-weight : bold;
  margin-top: 0.7em;
  margin-left: 0.5em;
}

input[type=radio]:checked +  label > span > span{
  display          : block;
  width            : 1em;
  height           : 1em;
  margin           : 0.5em;
  //border           : 0.0625em solid rgb(115,153,77);
  border-radius    : 0.5em;
  background       : rgb(153,204,102);
  background-image :    -moz-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :     -ms-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :      -o-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image : -webkit-linear-gradient(rgb(179,217,140),rgb(153,204,102));
  background-image :         linear-gradient(rgb(179,217,140),rgb(153,204,102));
}



.inline-div{
	display: inline-block;
}

.xy-dur-radio{
	width: 32%;
	text-align: center;
	.xy-dur-label{
		display: inline-block;
		vertical-align: middle;
		height: 3em;
	}
}

.row{
	margin: 0;
}

.block_text{
	display: block;
}

.btn-info {
	color: #ffffff;
	background-color: @blue;
}

.btn-danger{
	color: #ffffff;
	background-color: @red;
}

.btn-warning{
	color: #ffffff;
	background-color: @yellow;
}

.btn-disable{
	color: #ffffff;
	background-color: @gray;
}

.base-border-radius{
	border-radius: 0.5em !important;
}

.base-lr-margin{
	margin-left: @base-gap;
	margin-right: @base-gap;
}

.pay-icon{
	display: inline-block;
    vertical-align: middle;
}

.pay-icon .suc {
	background-position: 0 0;
}

.pay-icon .suc, .pay-icon .err {
	width: 33px;
	height: 30px;
	margin-top: 5px;
	display: inline-block;
}


.pay-icon .suc, .pay-icon .err, .pay-icon .hongbao {
	// background: url(//i1.dpfile.com/mod/app-m-tuangou/1.1.1/css/img/pay.comm.png) no-repeat;
	background: url(/static/images/pay.comm.png) no-repeat;
	background-size: 35px auto;
}

.pay-title{
    display: inline-block;
    vertical-align: middle;
    h4{
    	color: @orange;
	    //margin-bottom: 0;
	    //line-height: 22px;
    }
}

.error .ui-field-message,.error .ui-field-message:after{
	background-color: #ff3a0c;
}

.ui-field-message{
	float: right;
	position: relative;
	margin-top: 3px;
	padding: 2px 5px 1px;
	color: #fff;
	font-size: .875em;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-right: 5%;
}

.ui-field-message:after {
	content: "";
	position: absolute;
	z-index: 1;
	width: 4px;
	height: 4px;
	top: -2px;
	right: 19px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}


.xy_error_tips{
	position: absolute;
	top: 50%;
	width: 250px;
	height: 50px;
	margin-top: -25px;
	left: 50%;
	margin-left: -125px;
	background: rgba(0,0,0,.7);
	color: #fff;
	text-align: center;
	font-size: 14px;
	border-radius: 4px;
	line-height: 50px;
}
.Hide{
	display: none !important;
}

.navbar-app{
	background-color: @blue;
	color: #fff;
	.btn,.btn-navbar{
		color: #fff;
	}
}

.ur-small-element { 
    position:relative; 
}
.ur-small-element:after {
    content:'';
    position:absolute;
    top:-10px; bottom:-10px; 
    left:-10px; right:-10px; 
}

.app-content-loading {
  text-align: center;
  height: 100%;
  width: 100%;
  background: #fff;
  position: relative;
}

.loading-spinner {
  position: absolute;
  font-size: 50px;
  left: 50%;
  top: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.xy_editinput_text{

	text-align: center;
	color: @brand-danger;
}

a{
	color: @blue;
}

.control-label{
	&.highlight{
		font-size: 25px;
		padding-top: 7px;
	}
}

.form-control{
	font-size: 0.875rem;
	&.highlight{
		font-size: 25px;
		font-weight: bold;
		color: #f63; 
	}
}
span{
	&.price{
		// font-weight: 700;
		color:@light-red;
	}
}

.fl{
	float: left;
}

.fr{
	float: right;
}

.text_a_c{
	text-align: center;
}

.zindex999{
	z-index: 999;
}


.select-label{

	line-height: 42px;
	margin: 0;
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	font-size: 1rem;
	font-weight: 700;
}


//fbbd19
//fbe8aa
// .bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 25px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
// .bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px; } 

// .bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
//.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}


/*Form Wizard*/
.bs-wizard {padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color: #595959; font-size: 16px; margin-bottom: 5px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color: @blue; font-size: 0.875rem;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 0px; height: 0px; display: block; background: @blue; top: 25px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: @blue; border-radius: 50px; position: absolute; top: 4px; left: 8px; } 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 4px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: @blue;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {background: @gray}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }
/*END Form Wizard*/



.xy_select {
-webkit-appearance: none;
padding-right: 15px;
height: 40px;
-webkit-border-radius: 0;
border: none;
color: #000;
font-size: 1rem;
background: url() center right no-repeat;
}

.xy_bt{
	border-bottom: 1px solid #ddd;
}


.xy_field_input{
	span,input{
		font-size: 0.875rem;
	}
	.form-control-wrapper{
		padding:0;
		background-color: @white;
		border-radius: 0.5em;
	}
	&.active{
		.form-control-wrapper{
			border-color: @gray;
		}
	}
	&.error{
		.form-control-wrapper{
			border-color: @brand-danger;
		}
	}	
}

.xy_tar{
	text-align: right;
}

.xy_text_area{
	resize:none;
	width: 100%;
	border-color: @white;
}

.xy_rating{
	i{
		margin-right: 3px;
		&.fa-star{
			color: @yellow;
		}
		&.fa-star-o{
			color: @gray;
		}
	}
}
.wp25{
	width: 25%;
}

.wp33{
	width: 33.33%;
}

.xy_rbtn{
	position: absolute;
	right: 20px;
	top: 0;
}

.xy_highlight_bt{
	border-top: 1px solid #f63;
}


.record-highlight-text{
	color: @blue;
	display: inline-block;
}

.form-control-text{
	.form-control{
		border: none;
	}
}

.p15{
	padding: 15px;
}
.pt20{
	padding-top: 20px;
}

.w100{
	width: 100%;
}
.ml90{
	margin-left: 90px;
}

.ml15{
	margin-left: 15px;
}

.mr20{
	margin-right: 20px;
}
.mr15{
	margin-right: 15px;
}

.mtn5{
	margin-top: -5px;
}

.mr10{
	margin-right: 10px;
}
.ml20{
	margin-left: 20px;
}

.mt20{
	margin-top: 20px;
}

.mt80{
	margin-top: 80px !important;
}
.mt10{
	margin-top: 10px;
}

.mb10{
	margin-bottom: 10px !important;
}

.mb20{
	margin-bottom: 20px !important;
}
.mb15{
	margin-bottom: 15px;
}

.mt50{
	margin-top: 50px;
}

.mh20{
	margin-left: 20px;
	margin-right: 20px;
}


.pb0{
	padding-bottom: 0;
}

.pl0{
	padding-left: 0 !important;
}

.pr0{
	padding-right: 0;
}
.pl10{
	padding-left: 10px;
}
.pt100{
	padding-top:100px;
}
.pr15{
	padding-right: 15px;
}


.ph10{
	padding-left: 10px;
	padding-right: 10px;
}

.pv5{
	padding-top: 5px;
	padding-bottom: 5px;
}

.app-body{
	background-color: #fff;
}

.full-width{
	width: 100%;
}

.full-height{
	height: 100%;
}
.list-group{
	&.item20{
		.list-group-item{
			padding-top: 15px;
			padding-bottom: 15px;
		}

	}
	&.edit-group{
		>:first-child{
			border: 0;
			border-bottom: 1px solid #ddd;
			border-top-right-radius: 0.5em;
			border-top-left-radius: 0.5em;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
		}
		>:last-child{
			border-top-right-radius: 0;
			border-top-left-radius: 0;
			border-bottom-right-radius: 0.5em;
			border-bottom-left-radius: 0.5em;
		}
		.form-control-wrapper{
			border-top-right-radius: 0;
			border-top-left-radius: 0;
			border-bottom-right-radius: 0.5em;
			border-bottom-left-radius: 0.5em;
			border: 0;
		}

	}
	
}

.sub-title{
	font-size: 0.85em;
	color: @dark-gray;
}

.list-group-item{
		span{
			font-size: 0.875rem;
		}
		.inline-content{
			font-size: 0.875rem;
			position: absolute;
			
		}
}


.help-text{
	color: #777;
}

div{
	&.submit{
		margin:20px 0px;
	}
}


.btn-lg{
	font-size: 1.125rem !important;
}

.btn{
	font-size: 0.875rem;
	&.confirm{
		width: 100%;
		display: block;
		font-size: 1em;
		height: 40px;
		color: #fff;
		background-color: #f63;
		border-radius: 4px;
		text-align: center;
	}
	&.save{
		font-size: 1em;
		color: #fff;
		background-color: #f63;

	}
	&.cancel{
		font-size: 1em;
	}

	&.btn-supply{
		color: #fff;
		background-color: @blue;
		border-radius: 4px;
		text-align: center;
		// font-size: 1em;
	}
}



.xy-form-radio{
	text-align: right;
	line-height: 34px;
}
.xy_calendar_group{
	margin: 15px 2%;
	text-align: center;
	width: 96%;
	float: left;
	overflow: hidden;
	border-right: none !important;
	border: 1px solid #ddd;
	border-radius: 0.5em;
	.xy_calendar_item{
		float: left;
		width: 14.28%;
		border-right: 1px solid #ddd;
		>span{
			display: block;
			padding: 5px;
			&.top{
				border-bottom: 1px solid #ddd;
				height: 40px;
				line-height: 30px;
				background-color: @gray;
			}
			&.bottom{
				height: 50px;
				line-height: 40px;
			}
		}
		&.selected{
			>span{
				&.bottom{
					background-color: @blue;
					color: white;
				}
			}
		}
	}
}

.xy_calendar_title{
	.title{
		color: @blue;
	}
	margin-left: 5px;
	margin-right: 5px;
}

.xy_calendar_time_group{
	float: left;
	overflow: hidden;
	margin: 20px 2%;
	.xy_calendar_time_item{
		float: left;
		width: 31.33%;
		margin: 1%;
		font-size: 0.75rem;
		.xy-time-box{
			padding: 5px;
			border: 1px solid #ddd;
			border-radius: 5px;
			height: 40px;
			span{
				line-height: 30px;
			}
			&.selected{
				background-color: @blue;
				span{
					color: @white;
				}
			}
			&.disable{
				background-color: @gray;
				span{
					color: @white;
				}
			}
		}
	}
}



.xy_block_text{
	display: inline-block;
	.subtext{
		display: block;
		font-size: 0.75rem;
		color: #777;
	}
}

.xy_rtext{
	float: right;
	margin-top: 10px;
}

.xy_fix_top{
	position: absolute;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
}


.nav-tabs{
	&.xy_nav_tabs{
		border-color: @white;

		>li.active>a,>li.active>a:focus{
			background-color:inherit;
			border:inherit;
		}
		>li.active{
			.arrow-ent{
				display: inherit;
			}
			a{
				color: 	@blue;
				margin-top: 1px;
			}
		}
		>li{
			text-align: center;
			.arrow-ent{
				display: none;
			}
		}

		a{
			color: @dark-gray;
			font-size: 1rem;
		}
	}


}

.arrow-ent{
	&.top{
		position: absolute;
		border-color: #e8e8e8;
		top: initial;
		bottom: -4px;
		left: 44%;
		z-index: 99;
		border-width: 1px;
		background-color: #FFF;
		width: 8px;
		height: 8px;
		display: inline-block;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		cursor: pointer;
		/* position: relative; */
		/* top: -1px; */
		-webkit-transform: rotate(-135deg);
	}
}

.mobile-oneline-form{
	padding: 0;
	.form-control-wrapper{
		border: 1px solid #ddd;
		display: inline-block;
		.form-control,.datetime-form-control{
			border: none;
			height: 50px;
			padding-top: 15px;
			padding-bottom: 15px;
			width: 60%;
			display: inline;
		}
		i{
			height: 50px;
			line-height: 50px;
		}
	}
}